<template>
  <el-container class="arc_list">
    <el-header class="top">
      <i class="el-icon-s-home"></i>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/' }">文章管理</el-breadcrumb-item>
        <el-breadcrumb-item>文章列表</el-breadcrumb-item>
      </el-breadcrumb>
    </el-header>

    <el-container class="list">
      <!-- 搜索 -->
      <el-row class="search">
        <el-col :span="22">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="标题">
              <el-input
                v-model="formInline.user"
                placeholder="标题或内容关键词"
              ></el-input>
            </el-form-item>

            <el-form-item label="文章分类">
              <el-select v-model="formInline.region" placeholder="文章分类">
                <el-option label="分类一" value="shanghai"></el-option>
                <el-option label="分类二" value="beijing"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="2">
          <el-button type="primary">添加</el-button>
        </el-col>
      </el-row>

      <!-- 表格 -->
      <el-row class="list_data">
        <el-col :span="24">
          <el-table :data="tableData" size="small">
            <!-- style="width: 100%" -->

            <el-table-column prop="id" label="ID" width="80"> </el-table-column>

            <el-table-column prop="title" label="标题" min-width="150">
            </el-table-column>

            <el-table-column label="是否推荐" min-width="60">
              <!-- 自定义表格数据 -->
              <template slot-scope="scope">
                   {{ scope.row.recommend == 1 ? '推荐' : '不推荐' }}
              </template>
            </el-table-column>

            <el-table-column prop="cate_name" label="分类" min-width="80">
            </el-table-column>

            <el-table-column prop="view" label="浏览"> </el-table-column>

            <el-table-column prop="like" label="点赞"> </el-table-column>

            <el-table-column prop="ctime" label="发布时间" :formatter="formateTime"> </el-table-column>

            <!-- <el-table-column
            prop="name"
            label="操作">
          </el-table-column> -->
            <!-- 自定义列模板 -->
            <el-table-column label="操作" min-width="100">
              <template slot-scope="scope">
                <!-- <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->

                <div class="row_operator">

                  <i class="el-icon-view">
                    <router-link 
                      :to="{name:'article_info',params:{arc_id:scope.row.id,class_id:scope.row.cate_id}}"
                    >
                      查看
                    </router-link>
                  </i>

                  <i class="el-icon-edit-outline">
                    <!-- <router-link to="/admin/article/edit">修改</router-link> -->
                    <!-- /admin/article/edit/62/1 ， /admin/article/edit/63/2 -->
                    <!-- <router-link to="/admin/article/edit/62/1">修改</router-link> -->
                   
                     <!-- 
                       {{ scope.row.id }}
                        scope.row 固定的，表示当前这一行数据对象，就是一条数据
                        scope.row.字段名 就可以获取到对应的数据。scope.row.id、scope.row.title,scope.row.sub_title,...
                     -->
                    <!-- 路由跳转传递参数有两种，1是拼接字符串，2是传递对象，通过name+params或query方式 -->
                    <!-- <router-link :to="'/admin/article/edit/'+scope.row.id+'/'+scope.row.cate_id">修改</router-link> -->
                      <router-link 
                          :to="{name:'article_edit',params:{arc_id:scope.row.id,cate_id:scope.row.cate_id}}"
                      >
                        修改
                      </router-link>
                  </i>
                  <i class="el-icon-delete" @click="delArticle(scope.row.id)">删除</i>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>

      <!-- 分页 -->
      <el-row class="page">
        <el-col :span="24">
          <el-pagination 
            layout="total,sizes,prev, pager, next,jumper" 
            :total="total_records"
            :page-size="page_size"
            :page-sizes="page_sizes_arr"
            @size-change="changeSize"
            @current-change="changePage"
          >
          </el-pagination>
        </el-col>
      </el-row>
    </el-container>
  </el-container>
</template>

<script>
import http from '../utils/http.js'
import dayjs from 'dayjs'

export default {
  data() {
    return {
      // 表单数据
      formInline: {
        user: "",
        region: "",
      },
      tableData: [
        // {
        //   "id": 35,
        //   "cate_id": 1,
        //   "title": "文章标题一--11-14",
        //   "sub_title": "文章标题二",
        //   "recommend": 0,
        //   "content": "文章内容",
        //   "view": 1000,
        //   "like": 323,
        //   "username": "future2",
        //   "pic": null,
        //   "ctime": "1731557921000",
        //   "cate_name": "面向对象"
        // },
        // {
        //   "id": 34,
        //   "cate_id": 10,
        //   "title": "文章标题一--11-14",
        //   "sub_title": "文章标题二",
        //   "recommend": 0,
        //   "content": "文章内容",
        //   "view": 1000,
        //   "like": 323,
        //   "username": "future2",
        //   "pic": null,
        //   "ctime": "1731557120000",
        //   "cate_name": null
        // },
        // {
        //   "id": 33,
        //   "cate_id": 10,
        //   "title": "文章标题一--11-14",
        //   "sub_title": "文章标题二",
        //   "recommend": 0,
        //   "content": "文章内容",
        //   "view": 1000,
        //   "like": 323,
        //   "username": "future2",
        //   "pic": null,
        //   "ctime": "1731557049",
        //   "cate_name": null
        // },
        // {
        //   "id": 32,
        //   "cate_id": 10,
        //   "title": "文章标题一--11-14",
        //   "sub_title": "文章标题二",
        //   "recommend": 0,
        //   "content": "文章内容",
        //   "view": 1000,
        //   "like": 323,
        //   "username": "future2",
        //   "pic": null,
        //   "ctime": "1731556891000",
        //   "cate_name": null
        // }
      ], //文章列表

      // 分页相关的参数
      page:1, //页码，默认是1
      page_size:8, //每页面显示的条数,默认每页显示8条
      total_records:0,//总条数(总共有多少篇文章)
      page_sizes_arr:[8,10,16,30,50,100] //每页 显示条数的数组，可以给用户选择的一个下拉框
    
    };
  },
  created(){
    this.getList() //页面进入的时候，显示数据
  },
  methods: {
     delArticle(aid){
       console.log('文章id',aid)
      // 原始
      // // 1.取id
      // let arc_id = aid;

      // // 2.发请求
      // // http://127.0.0.1:3000/article/article_delete?id=13
      // let url = `/api/article/article_delete?id=`+arc_id;
      // let res = await http.get(url)

      // // 3.处理结果
      // console.log(res)
      // let result = res.data; //axios中得到我们想要的结果。
      // // 提示
      // this.$message({type:"success",message:result.msg})
      // // 更新列表-调用列表方法
      // this.getList()

      // 删除执行前给个最后的确认
      this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        .then(async () => {
          //选择了 确定 时执行
          // this.$message({
          //   type: 'success',
          //   message: '删除成功!'
          // });
          
          // 1.取id
          let arc_id = aid;

          // 2.发请求
          // http://127.0.0.1:3000/article/article_delete?id=13
          let url = `/api/article/article_delete?id=`+arc_id;
          let res = await http.get(url)

          // 3.处理结果
          console.log(res)
          let result = res.data; //axios中得到我们想要的结果。

          // 提示
          this.$message({type:"success",message:result.msg})
          // 更新列表-调用列表方法
          this.getList()

        }).catch(() => {
          //取消时执行 事情
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
       });
    },
    onSubmit() {
      console.log("submit!");
    },
    async getList(){

      // 发请求，获取数据
      console.log('获取文章列表')
      let res = await http.get("/api/article/list",{params:{page:this.page,page_size:this.page_size}})
      console.log(res)

      //后台默认加载的页面，作一下处理，当返回401，证明已经退出
      if(localStorage.getItem("is_login") == 0){
         this.$router.push({name:"login"})
         return;
      }

      // 从返回的结果中取想要的数据
      let res_data = res.data; //后端数据
      let list = res_data.data.list; //文章列表
      console.log(list)

      // 把取到的数据给data中的属性，好显示在页面
      this.tableData = list;

      // 保存总条数，好生成分页页码
      this.total_records = res_data.data.total_records;

    },
    // 当我们改变每页面显示的条数的时候，会自动执行
    changeSize(num){
      console.log("修改了每页显示的条数:"+num)
      this.page_size = num;
      this.getList();//
    },
    changePage(num){
      // num 表示当前点的是第几页
      console.log('当前页码'+num)
      this.page = num; //更新页码
      this.getList()   //使用 新页码，获致这页的数据
    },
    formateTime(row, column, cellValue, index){
      // row 当前这行数据对象
      // column 单元格组件对象，基本用不上
      // cellValue 单元格 字段值
      // index 当前这行数据对象 在 data数组中的索引
      // console.log("准备格式单元格内容",row, column, cellValue, index)

      // A 进行格式化处理
      let time = dayjs.unix(cellValue).format('YYYY-MM-DD HH:mm:ss') //2024-11-15 12:20:21

      // B 一定要返回值
      // return '2024-11-15 12:20:21';
      return time;
    }
  },
};
</script>

<style lang="less" scoped>
.arc_list {
  color: #000000;

  // /deep/ 深度选择器，可以重置组件内置的样式。别忘了样式要加scoped，
  // 有可能还需要!important来提升样式的优先级。
  /deep/.el-header {
    display: flex;
    align-items: center;
    height: 62px !important;
    background: #edebeb;

    .el-icon-s-home {
      color: #000000;
      font-size: 20px;
    }

    .el-breadcrumb {
      height: 35px;
      display: flex;
      align-items: center;
      margin-bottom: 0;
      font-size: 12px;
    }
  }

  // 搜索
  .list {
    display: flex;
    flex-direction: column;

    width: 100%;
    padding: 0 15px;

    .search {
      display: flex;
      box-sizing: border-box;
      height: 45px;
      width: 100%;

      justify-content: space-between;
      align-items: center;

      margin: 10px 0;

      // background-color: red;

      .el-col-2{
        text-align:right
      }
      
      .el-form-item {
        margin-bottom: 0;

        /deep/.el-form-item__label {
          font-size: 12px;
        }
      }
    }

    .list_data {
      .row_operator {
        i {
          margin: 0 5px;
        }
      }
    }

    .page {
      margin-top:15px;
      text-align: center;
    }
  }
}
</style>